<template>
  <div class="flex-container">
    <div class="flex-item">
      <header-ly></header-ly>
    </div>
    <div class="flex-item">
      <router-view></router-view>
    </div>
    <div class="flex-item">
      <footer-ly></footer-ly>
    </div>
  </div>
</template>

<script type="text/babel">
  import HeaderLy from '@/components/header'
  import FooterLy from '@/components/footer'
  import {
    Row,
    Col,
    Icon,
    Cell,
    CellGroup,
    Badge,
    BadgeGroup,
    Button,
    Tag,
    ImagePreview,
    List,
    NoticeBar,
    Panel,
    Tab,
    Tabs
  } from 'vant'

  export default {
    components: {
      HeaderLy,
      FooterLy,
      [Row.name]: Row,
      [Col.name]: Col,
      [Icon.name]: Icon,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Badge.name]: Badge,
      [BadgeGroup.name]: BadgeGroup,
      [Button.name]: Button,
      [Tag.name]: Tag,
      [ImagePreview.name]: ImagePreview,
      [List.name]: List,
      [NoticeBar.name]: NoticeBar,
      [Panel.name]: Panel,
      [Tab.name]: Tab,
      [Tabs.name]: Tabs
    },
    data() {
      return {
        active: 2,
        activeKey: 0,
        list: [],
        loading: false,
        finished: false
      }
    },
    mounted() {
    },
    methods: {
      onClick(key) {
        this.activeKey = key
      },
      onLoad() {
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1)
          }
          this.loading = false

          if (this.list.length >= 40) {
            this.finished = true
          }
        }, 500)
      },
      imagePreview() {
        ImagePreview([
          'https://img.yzcdn.cn/2.jpg',
          'https://img.yzcdn.cn/2.jpg'
        ])
      }
    }
  }
</script>

<style lang="scss">
  .user {
    &-poster {
      width: 7.5rem;
      height: 4rem;
      display: block;
    }
    &-group {
      margin-bottom: .3rem;
    }
    &-links {
      padding: 15px 0;
      font-size: 12px;
      text-align: center;
      background-color: #fff;
      .van-icon {
        display: block;
        font-size: 24px;
      }
    }
  }
</style>
